import React, { Component } from "react";
export default class One extends Component {
    constructor(props) {
        super(props)
        this.todoArr = this.todoArr.bind(this)
    }
    state = {
        arr: [
            { a: "aa", b: "bb", id: "1" },
            { a: "aa", b: "bb", id: "2" },
            { a: "aa", b: "bb", id: "3" },
            { a: "aa", b: "bb", id: "4" },
        ],
        name: 'wyt',
        newname: "王永泰",
        oldname: '王王王',
        flag: true,
        num: 1
    }
    change = () => {
        this.setState({
            flag: !this.state.flag
        })
    }

    editName() {
        this.setState(({ newname, oldname, flag }) => {
            return {
                name: flag ? newname : oldname
            }
        })
    }
    // add = (n) => {
    //     console.log(n, "nnnn")
    //     for (let index = 0; index < 50; index++) {
    //         this.setState({
    //             num: this.state.num * n
    //         })

    //     }
    // }
    add = n => {
        for (let i = 0; i < 50; i++) {
            this.setState(({ num }) => {
                return {
                    num: num * n
                }
            }, () => {
                console.log(this.state.num, "num")
            })
        }
    }
    // todoArr = () => this.state.arr.map(item => <li key={item.id}>{item.a} - {item.b}</li>)
    todoArr() {
        return this.state.arr.map(item => <li key={item.id}>{item.a} - {item.b}</li>)
    }
    render() {
        let { arr, name, flag, newname, oldname, num } = this.state
        let { change, editName, add, todoArr } = this
        return (
            <div>
                <h1>数据渲染</h1>
                <ul>
                    {todoArr()}
                    {/* {arr.map((item) => <li key={item.id}>{item.a}-{item.b}</li>)} */}
                </ul>
                <h1>姓名：{name}</h1>
                <button onClick={editName.bind(this)}>editName</button>
                <button onClick={change}>change</button>
                <button onClick={() => { add(10) }}>add</button>
                <h1>{flag ? "真" : "假"}</h1>
                <h1>{num}</h1>
            </div>
        )
    }
}


